
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin 属性：【微调：文字或者图片】
			margin使用问题1：自适应居中，建议使用div，套块元素、行块内元素、行内元素
			      使用问题2：行元素，上下 外边距失效   右左外边距--
				            行元素：不可以设置高宽[高---不可以动上下]、在一行内显示【宽--可以左右动】、无法居中，内置文本
			      使用问题3:垂直外边距
				  使用问题4：垂直外边距
				  */
			img{
				border: 1px solid red;
				/* margin  4个属性值 */
				/* margin 1个属性值：顺时针：上 右 下 左 */
				margin: 200px;
				/* margin 2个属性值：顺时针：上下    右左 */
				margin: 10px 200px;
			    /* 常用：盒子自适应居中 ---失效
				行内块：可以设置高宽、在一行内显示、无法居中
				margin使用问题一：自适应居中，必须设置宽度*/
				width: 100%;
			    margin: 0 auto;
				/* margin 3个属性值：顺时针：上   右左   下*/
				mar  gin: 100px 200px 300px;
				/* margin 2个属性值：顺时针：上  右  下  左 */
				mar gin: 100px 200px 300px 400px;
			}
			h1{
			/* 常用：盒子自适应居中 ---设置宽度
			块元素：可以设置高宽、不在一行内显示、无法居中，内置文本
			text-align: center;*/
			width: 100%;
			border: 1px solid red;
			margin: 1000px 200px;
			
			}
			span{
			/* 常用：盒子自适应居中 ---失效
			行元素：不可以设置高宽[高---不可以动上下]、在一行内显示【宽--可以左右】、无法居中，内置文本
			text-align: center;*/
				width: 100%;
				border: 1px solid red;
				margin: 100px 200px;
				}
				
				
		div{
			width: 200px;
			height: 200px;
			background: red;
			margin: 0 auto;
		}
		</style>
	</head>
	<body>
		
		<div></div>
		
		
		<!-- 框模型、盒子模型：四个部分组成，
		                                外边距：边框以外的四周，叫做外边距   属性：margin属性
										边框： --
										内边距： 边框以内与内容之间距离，叫做内边距
										内容：块、行、行内元素本身宽高
		
		
		
		所有元素存在于框模型当中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞节装饰PNG免抠元素 (27)_爱给网_aigei_com.png" width="300px" height="300px" alt="圣诞">
	    <span>行内元素：圣诞</span>
	</body>
</html>